<template>
  <div>
    <k-dialog v-if="visibleDialog" :width="400" :title="confirmModalOptions.title" @close="toggleDialog">
      <p :style="{ margin: '25px', textAlign: 'center' }">{{ confirmModalOptions.message }}</p>
      <dialog-actions-bar>
        <button v-for="(item,index) in confirmModalOptions.btn" :key="index" class="k-button k-primary" @click="click(item.type)">{{ item.text }}</button>
      </dialog-actions-bar>
    </k-dialog>
  </div>
</template>
  <script>
  import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs'
  export default {
    components: {
      'k-dialog': Dialog,
      'dialog-actions-bar': DialogActionsBar
    },
    data() {
      return {
        visibleDialog: true,
        confirmModalOptions: {
          title: '提示',
          message: '是否确认当前操作！'
        }
      }
    },
    methods: {
      click(type) {
        if (type === 'submit') {
          this.execute()
        }
        if (type === 'cancel') {
          this.cancel(0)
        }
      },
      execute() {
        this.visibleDialog = !this.visibleDialog
      },
      cancel() {
        this.visibleDialog = !this.visibleDialog
      },
      toggleDialog() {
        this.visibleDialog = !this.visibleDialog
      }
    }
  }
</script>
